<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.admin_name" placeholder="操作人名称"></el-input>
      <el-input size="small" v-model="searchMap.title" placeholder="标题"></el-input>
      <el-input size="small" v-model="searchMap.content" placeholder="请求内容"></el-input>
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id" width="100"></el-table-column>
      <el-table-column label="操作人" prop="admin_name" width="100px"></el-table-column>
      <el-table-column label="操作角色" prop="rule_name"></el-table-column>
      <el-table-column label="标题" prop="title" width="180px"></el-table-column>
      <el-table-column label="请求action" prop="action_name"></el-table-column>
      <el-table-column label="请求内容" prop="content" width="400px">
        <template slot-scope="scope">
          <div style=" height: 80px; overflow: scroll">{{scope.row.content}}</div>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type" width="80px"></el-table-column>
      <el-table-column label="ip" prop="ip" width="120px"></el-table-column>
      <el-table-column label="url" prop="url"></el-table-column>
      <el-table-column label="创建时间" prop="created_at"></el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import operationApi from "@/api/operation";

@Component({
  components: { }
})
export default class operationList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() advertisers: any = [];
  @Provide() searchData: any = {
    pageNum: 1
  };

  @Provide() formData: any = {
    id:"",
    advertisersName:"",
    advertisersKey: "",
    appid:""
  };
  @Provide() searchMap: {
    admin_name: string,
    content:string,
    title:string,
    begin_time:string,
    end_time:string,
  }={
    admin_name:'',
    content:'',
    begin_time:'',
    end_time:'',
  title: ''
  }
  created() {
    this.loadData();
  }
  loadData() {
    operationApi.operationList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    // 点击搜索
    if(this.dateTime==null){
      this.dateTime=["",""]
    }
    this.searchMap.begin_time=this.dateTime[0]
    this.searchMap.end_time=this.dateTime[1]
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
</style>
